import 'package:flutter/material.dart';
import 'package:get/get.dart';
import 'package:tiktokadult/tools_base/widget/net_image_widget.dart';

import 'live_detail_page.dart';
import 'live_model.dart';
import 'live_widget.dart';

class LiveItemWidget extends StatelessWidget {
  final int showType; //0-九宫格 1-六圆形 2-4宫格 3-六宫格 4-横向滑动 5-list
  final int? index; //顺序
  final LiveAnchor? anchor; //主播信息
  final Function()? action;

  const LiveItemWidget({
    Key? key,
    this.showType = 0,
    this.anchor,
    this.index,
    this.action,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return GestureDetector(
      onTap: () {
        if (action != null) {
          action?.call();
        } else {
          Get.to(() => LiveDetailPage(anchor: anchor), preventDuplicates: false);
        }
      },
      child: _buildContent(),
    );
  }

  _buildContent() {
    if (showType == 0) return _buildType0();
    if (showType == 1) return _buildType1();
    if (showType == 2) return _buildType2();
    if (showType == 3) return _buildType3();
    if (showType == 4) return _buildType4();
    if (showType == 5) return _buildType5();
    return Container();
  }

  _buildType0() {
    return Stack(
      children: [
        Positioned.fill(
          child: NetworkImageLoader(imageUrl: anchor?.coverImg ?? '', encrypt: false),
        ),
        Positioned(
            left: 6,
            bottom: 6,
            child: Text(
              anchor?.name ?? '',
              style: TextStyle(fontSize: 12, color: Colors.white, fontWeight: FontWeight.w400),
            )),
        Positioned(
            right: 0,
            top: 0,
            child: Container(
              padding: EdgeInsets.symmetric(horizontal: 6, vertical: 3),
              decoration: BoxDecoration(
                gradient: LinearGradient(
                  colors: [
                    Color(0xffFF847B),
                    Color(0xffDB075C),
                  ],
                  begin: Alignment.topLeft,
                  end: Alignment.bottomRight,
                ),
                borderRadius: BorderRadius.only(
                  bottomLeft: Radius.circular(9),
                  topRight: Radius.circular(8),
                ),
              ),
              child: Text(
                '王牌主播',
                style: TextStyle(fontSize: 10, color: Colors.white, fontWeight: FontWeight.w400),
              ),
            )),
      ],
    );
  }

  _buildType1() {
    return Column(
      children: [
        Stack(
          alignment: Alignment.center,
          children: [
            AspectRatio(
              aspectRatio: 1,
              child: ClipOval(
                  child: Container(
                decoration: BoxDecoration(
                    gradient: LinearGradient(
                  colors: [
                    Color(0xffFD1273),
                    Color(0xffFD1273).withOpacity(.1),
                  ],
                  begin: Alignment.topCenter,
                  end: Alignment.bottomCenter,
                )),
                padding: EdgeInsets.all(3),
                child: ClipOval(
                  child: NetworkImageLoader(imageUrl: anchor?.coverImg ?? '', encrypt: false),
                ),
              )),
            ),
            Positioned(
              bottom: 10,
              child: AudioWaveView(
                width: 2,
                margin: 3,
                color: Colors.white,
              ),
            )
          ],
        ),
        SizedBox(height: 2),
        Text(
          anchor?.name ?? '',
          style: TextStyle(fontSize: 14, color: Colors.white, fontWeight: FontWeight.w400),
          maxLines: 1,
          overflow: TextOverflow.ellipsis,
        ),
        SizedBox(height: 2),
        Container(
          padding: EdgeInsets.symmetric(horizontal: 8, vertical: 4),
          decoration: BoxDecoration(
            borderRadius: BorderRadius.circular(999),
            color: Colors.white,
            boxShadow: [
              BoxShadow(
                color: Color(0xffFD0563).withOpacity(.2),
                blurRadius: 15.0, //阴影模糊程度
                spreadRadius: 1.0,
              ),
            ],
          ),
          child: Text(
            '霸占TA>',
            style: TextStyle(fontSize: 10, color: Color(0xffFD0563), fontWeight: FontWeight.w400),
          ),
        ),
      ],
    );
  }

  _buildType2() {
    return Stack(
      children: [
        Positioned.fill(
          child: NetworkImageLoader(imageUrl: anchor?.coverImg ?? '', encrypt: false),
        ),
        Positioned(
            left: 6,
            bottom: 6,
            child: Text(
              anchor?.name ?? '',
              style: TextStyle(fontSize: 12, color: Colors.white, fontWeight: FontWeight.w400),
            )),
        Positioned(
            right: 0,
            top: 0,
            child: Container(
              padding: EdgeInsets.symmetric(horizontal: 6, vertical: 3),
              decoration: BoxDecoration(
                gradient: LinearGradient(
                  colors: _buildColor(index ?? 0),
                  begin: Alignment.topLeft,
                  end: Alignment.bottomRight,
                ),
                borderRadius: BorderRadius.only(
                  bottomLeft: Radius.circular(9),
                  topRight: Radius.circular(8),
                ),
              ),
              child: Text(
                '潮喷NO.${(index ?? 0) + 1}',
                style: TextStyle(fontSize: 10, color: Color(0xff212121), fontWeight: FontWeight.w400),
              ),
            )),
      ],
    );
  }

  _buildColor(int index) {
    if (index == 0)
      return [
        Color(0xffF8F3AE),
        Color(0xffDDAC44),
      ];
    if (index == 1)
      return [
        Color(0xffF7F7F7),
        Color(0xff8E999A),
      ];
    if (index == 2)
      return [
        Color(0xffFCE4C5),
        Color(0xff9C6A36),
      ];

    return [
      Color(0xffC8CEE7),
      Color(0xff8D98BF),
    ];
  }

  _buildType3() {
    return Stack(
      children: [
        Positioned.fill(
          child: Container(
            padding: EdgeInsets.all(2),
            decoration: BoxDecoration(
                borderRadius: BorderRadius.circular(6),
                gradient: LinearGradient(
                  colors: [
                    Color(0xffFC1575),
                    Color(0xffFC1575).withOpacity(.1),
                  ],
                  begin: Alignment.topCenter,
                  end: Alignment.bottomCenter,
                )),
            child: NetworkImageLoader(
              imageUrl: anchor?.coverImg ?? '',
              encrypt: false,
              borderRadius: 6,
            ),
          ),
        ),
        Positioned(
            left: 6,
            bottom: 6,
            child: Text(
              anchor?.name ?? '',
              style: TextStyle(fontSize: 12, color: Colors.white, fontWeight: FontWeight.w400),
            )),
      ],
    );
  }

  _buildType4() {
    return Container(
      padding: EdgeInsets.all(4),
      decoration: BoxDecoration(
          borderRadius: BorderRadius.circular(6),
          gradient: LinearGradient(
            colors: [
              Color(0xffFC1474),
              Color(0xffFC1474).withOpacity(.1),
            ],
            begin: Alignment.topCenter,
            end: Alignment.bottomCenter,
          )),
      child: _buildType5(),
    );
  }

  _buildType5() {
    return Stack(
      children: [
        Positioned.fill(
          child: NetworkImageLoader(
            imageUrl: anchor?.coverImg ?? '',
            encrypt: false,
            borderRadius: 6,
          ),
        ),
        Positioned(
            left: 6,
            bottom: 6,
            child: Text(
              anchor?.name ?? '',
              style: TextStyle(fontSize: 12, color: Colors.white, fontWeight: FontWeight.w400),
            )),
        Positioned(
            right: 6,
            top: 6,
            height: 16,
            child: Row(
              children: [
                Container(
                  height: 8,
                  width: 8,
                  decoration: BoxDecoration(
                    color: (anchor?.isOnline ?? false) ? Color(0xff0AEBED) : Color(0xff656565),
                    borderRadius: BorderRadius.circular(4),
                  ),
                ),
                SizedBox(width: 4),
                Text(
                  (anchor?.isOnline ?? false) ? '直播中' : '离线',
                  style: TextStyle(fontSize: 10, color: Colors.white, fontWeight: FontWeight.w400),
                )
              ],
            )),
        Positioned(
            left: 6,
            top: 6,
            child: Container(
              height: 16,
              alignment: Alignment.center,
              padding: EdgeInsets.symmetric(horizontal: 4),
              decoration: BoxDecoration(
                color: Colors.black.withOpacity(.3),
                borderRadius: BorderRadius.circular(999),
              ),
              child: Text(
                '${anchor?.viewCount ?? 0}人观众',
                style: TextStyle(fontSize: 10, color: Colors.white, fontWeight: FontWeight.w400),
              ),
            )),
      ],
    );
  }
}
